<template>
	<view class="ticket-container">
		<!-- 门票标题和类型 -->
		<view class="ticket-header">
			<view class="ticket-type">
				{{ ticketTypeText }}
			</view>
			<view class="ticket-status" :class="statusClass">
				{{ statusText }}
			</view>
		</view>
		
		<!-- 价格区域 -->
		<view class="ticket-price-section">
			<view class="price">
				<text class="currency">¥</text>
				<text class="price-value">{{ price }}</text>
			</view>
			<view class="stock-info">
				库存: {{ stock }}张
			</view>
		</view>
		
		<!-- 门票描述 -->
		<view class="ticket-desc" v-if="desc">
			{{ desc }}
		</view>
		
		<!-- 来源渠道 -->
		<view class="ticket-source">
			<text class="label">来源:</text>
			<text class="source-text">{{ sourceChannelText }}</text>
		</view>
		
		<!-- 销售时间 -->
		<view class="ticket-sale-time">
			<text class="label">销售时间:</text>
			<text class="time-text">{{ formatSaleTime }}</text>
		</view>
		

	</view>
</template>

<script setup>
import { computed, ref } from 'vue';

// 定义props
const props = defineProps({
  ticketId: {
    type: Number,
    required: true
  },
  sightId: {
    type: Number,
    required: true
  },
  price: {
    type: Number,
    required: true
  },
  stock: {
    type: Number,
    required: true
  },
  desc: {
    type: String,
    default: ''
  },
  ticketType: {
    type: String,
    required: true
  },
  sourceChannel: {
    type: String,
    required: true
  },
  saleStartTime: {
    type: String,
    required: true
  },
  saleEndTime: {
    type: String,
    required: true
  },
  status: {
    type: String,
    default: 'active'
  },
  createdAt: {
    type: String,
    required: true
  },
  updatedAt: {
    type: String,
    required: true
  }
});



// 计算属性 - 门票类型文本
const ticketTypeText = computed(() => {
  const typeMap = {
    'child': '儿童票',
    'adult': '成人票',
    'student': '学生票',
    'senior': '老人票',
    'family': '家庭票',
    'group': '团体票'
  };
  return typeMap[props.ticketType] || props.ticketType;
});

// 计算属性 - 状态文本和样式
const statusText = computed(() => {
  const statusMap = {
    'active': '在售',
    'inactive': '停售',
    'sold_out': '已售罄',
    'upcoming': '即将开售'
  };
  return statusMap[props.status] || props.status;
});

const statusClass = computed(() => {
  return `status-${props.status}`;
});

// 计算属性 - 来源渠道文本
const sourceChannelText = computed(() => {
  const channelMap = {
    'official': '官方',
    'agent': '代理商',
    'partner': '合作伙伴'
  };
  return channelMap[props.sourceChannel] || props.sourceChannel;
});

// 计算属性 - 格式化销售时间
const formatSaleTime = computed(() => {
  const start = new Date(props.saleStartTime);
  const end = new Date(props.saleEndTime);
  
  const formatDate = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  };
  
  return `${formatDate(start)} 至 ${formatDate(end)}`;
});


</script>

<style lang="scss" scoped>
.ticket-container {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin: 20rpx 0;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-4rpx);
    box-shadow: 0 8rpx 28rpx rgba(0, 0, 0, 0.08);
  }

  // 顶部信息区
  .ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ticket-type {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      position: relative;
      padding-left: 20rpx;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 6rpx;
        height: 60%;
        border-radius: 3rpx;
        background-color: #007aff;
        transform: translateY(-50%);
      }
    }

    .ticket-status {
      font-size: 26rpx;
      padding: 6rpx 16rpx;
      border-radius: 20rpx;
      font-weight: 500;
      line-height: 1.2;
      &.status-active {
        background-color: #e6f8f0;
        color: #16a34a;
      }
      &.status-inactive {
        background-color: #f3f4f6;
        color: #9ca3af;
      }
      &.status-sold_out {
        background-color: #fee2e2;
        color: #dc2626;
      }
      &.status-upcoming {
        background-color: #fef9c3;
        color: #ca8a04;
      }
    }
  }

  // 价格区
  .ticket-price-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .price {
      display: flex;
      align-items: baseline;
      .currency {
        font-size: 28rpx;
        color: #f43f5e;
        margin-right: 4rpx;
      }
      .price-value {
        font-size: 44rpx;
        font-weight: 700;
        color: #f43f5e;
      }
    }

    .stock-info {
      font-size: 24rpx;
      color: #6b7280;
    }
  }
  // 描述信息
  .ticket-desc {
    font-size: 26rpx;
    color: #4b5563;
    line-height: 1.6;
    background-color: #f9fafb;
    padding: 16rpx;
    border-radius: 12rpx;
  }

  // 来源渠道
  .ticket-source,
  .ticket-sale-time {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #555;

    .label {
      color: #9ca3af;
      margin-right: 10rpx;
    }

    .source-text,
    .time-text {
      color: #374151;
    }
  }


}
</style>